<!--新闻投稿员管理-->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('新闻投稿员管理')">
</head>

<!--数据校验插件静态资源文件-->
<script src="js/bootstrapValidator.min.js"></script>
<link href="css/bootstrapValidator.min.css" rel="stylesheet">

<style>
    div.container div.row div {
        margin: 5px 0px;
        text-align: center;
    }
</style>

<body>
<div id="workingArea">
    <div class="container">
        <div class="row">
            <!--栅栏布局12列开始-->
            <div class="col-md-12">
                <div th:replace="include/admin/adminNavigator::html"></div>
            </div>

            <!--面包屑导航-->
            <div class="col-md-12" style="text-align: left">
                <ol class="breadcrumb">
                    <li><a href="/home">个人中心</a></li>
                    <li>新闻投稿员管理</li>
                </ol>
            </div>
            <!--栅栏布局3列-->
            <div th:replace="include/admin/adminLeftMenu::html"></div>

            <!--栅栏布局9列开始-->
            <div class="col-md-9 ">

                <!--搜索框开始-->
                <!--<div class="container">-->
                    <div class="col-sm-12 col-xs-12 input-group">
                        <input type="text" v-model="keyword" class="form-control input-md">
                        <span @click="search" class="input-group-addon btn btn-primary">搜索</span>
                        <span @click="all" class="input-group-addon btn btn-primary" th:text="显示全部"></span>
                    </div>
                <!--</div>-->
                <!--搜索框结束-->

                <!--查询结果显示开始-->
                <div>
                    <span class="text-muted">管理员列表</span>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <thead>
                        <tr class="success">
                            <th>ID</th>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>真实姓名</th>
                            <th>联系方式</th>
                            <th>用户类型</th>
                            <th>删除</th>
                            <th>编辑</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for=" bean in beans">
                            <td>{{bean.id}}</td>
                            <td>{{bean.name}}</td>
                            <td>{{bean.password}}</td>
                            <td>{{bean.realname}}</td>
                            <td>{{bean.phone}}</td>
                            <td>{{bean.role}}</td>
                            <td><a href="#nowhere" @click="deleteBean(bean.id)">
                                <span class="glyphicon glyphicon-trash"></span></a></td>
                            <td><a href="#nowhere" @click="getBean(bean.id)" data-toggle="modal" data-target="#myModal">
                                <span class="glyphicon glyphicon-edit"></span></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!--查询结果显示结束-->

                <!--分页显示-->
                <div th:replace="include/admin/adminPage::html"></div>

                <!--模态窗体修改开始-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span
                                        class="sr-only">Close</span></button>
                                <h4 class="modal-title">编辑用户信息</h4>
                            </div>
                            <div class="modal-body">
                                <!--<p>编辑信息</p>-->
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">用户名：</label>
                                        <div class="col-sm-6">
                                            <input name="username" disabled="disabled" class="form-control"  v-model="bean.name" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-4 control-label">密码：</label>
                                        <div class="col-sm-6">
                                            <input name="password" class="form-control"  v-model="bean.password" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-4 control-label">手机号：</label>
                                        <div class="col-sm-6">
                                            <input placeholder="选填" name="phone" class="form-control"  v-model="bean.phone" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-4 control-label">姓名：</label>
                                        <div class="col-sm-6">
                                            <input placeholder="选填" name="name" class="form-control"  v-model="bean.realname" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-4 control-label">角色：</label>
                                        <div class="col-sm-6">
                                            <!--<input  class="form-control" disabled="disabled" v-model="bean.role" />-->
                                            <select name="role" class="form-control" v-model="bean.role" >
                                                <option>管理员</option>
                                                <option>新闻投稿员</option>
                                                <option>新闻审核员</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button data-dismiss="modal" class="btn btn-info" type="submit" @click="update">提交修改</button>
                                        <button data-dismiss="modal" class="btn btn-info" type="button">关闭</button>

                                    </div>
                                </form>
                            </div>

                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
                <!--模态窗体修改结束-->

            </div>
            <!--栅栏布局9列结束-->
        </div>
    </div>
</div>

<!--前后端交互-->
<script>
    $(function () {
        /*文档加载开始*/
        var data4Vue = {
            uri: "user",
            pagination: {},
            beans: [],
            bean: {id: "", name: "", password: "",realname:"",phone:"",role:""},
            keyword: "",
            is_search: "",
            role:"新闻投稿员"
//            image:"",
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted: function () { //mounted　表示这个 Vue 对象加载成功了
                this.list(0);
            },
            methods: {
                list: function (start) {
                    var url = this.uri+"byrole/"+this.role+"?start=" + start;
//                    如果是条件查询就访问这个请求
                    if (this.is_search) {
                        url = this.uri + "_search/"+this.role+"?keyword=" + this.keyword + "&start=" + start;
                    }

                    axios.get(url).then(function (response) {
                        console.log(response.data);
                        vue.pagination = response.data.data;
                        vue.beans = response.data.data.content;

                    });
                },
                deleteBean: function (id) {
                    if (!checkDeleteLink())
                        return;
                    var url = this.uri + "/" + id;
                    axios.delete(url).then(function (response) {
                        if (0 == response.data.code) {
                            vue.list(0);
                        }
                        else {
                            alert("删除失败");
                        }
                    });
                },
                getBean: function (id) {
                    var url = this.uri + "/" + id;
                    axios.get(url).then(function (response) {
                        console.log(response);
                        vue.bean = response.data.data;
                    })
                },
                update: function () {
                    var url = this.uri+"/"+this.bean.id;
                    //axios.js 上传文件要用 formData 这种方式
                    var formData = new FormData();
                    formData.append("id",this.bean.id);
                    formData.append("name", this.bean.name);
                    formData.append("password", this.bean.password);
                    formData.append("realname", this.bean.realname);
                    formData.append("phone", this.bean.phone);
                    formData.append("role", this.bean.role);
                    axios.put(url,formData).then(function () {
                        vue.list(0);
                    });
                },
                search: function () {
                    this.is_search = true;
                    var url = this.uri + "_search/"+this.role+"?keyword=" + this.keyword;
                    axios.get(url).then(function (response) {
                        vue.pagination = response.data.data;
                        vue.beans = response.data.data.content;
                    })
                },
                all: function () {
                    this.is_search = false;
                    this.list(0);
                },
                getImage: function (event) {
                    this.image = event.target.files[0];
                },
                jump: function (page) {
                    jump(page, vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function (start) {
                    jumpByNumber(start, vue);
                },
                logout: function () {
                    var url = "logout";
                    axios.post(url).then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 0) location.href = "fore_login";
                    });
                },
            }
        });

        /*文档加载借宿*/
    });
</script>

<!--表单校验-->
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                phone: {
                    validators: {
                        regexp: {
                            /*手机号1开头，第二位34578 然后11位*/
                            regexp: /^1[3|4|5|7|8][0-9]{9}$/,
                            message: '请输入正确的11位手机号码'
                        }
                    }
                },
                name: {
                    validators: {
                        regexp: {
                            /*中文 2-7位*/
                            regexp: /^([\u4e00-\u9fa5]){2,7}$/,
                            message: '请输入正确的姓名'
                        }
                    }

                },
                role:{
                    message :'角色验证失败',
                    validators:{
                        notEmpty:{
                            message:'角色不能为空'
                        },
                        callback: {
                            callback: function(value, validator) {

                                if (value == -1) {
                                    return false;
                                } else {
                                    return true;
                                }

                            }
                        }
                    }
                },
            },
            submitHandler: function (validator, form, submitButton) {
                alert("submit");
            }
        });
    });
</script>
</body>
</html>